<template>
  <div>
    <div></div>
    <div class="dingwei">定位城市</div>
    <div class="chengshi">最近访问城市</div>
    <div class="fangwen">
      <div v-for="(item, index) in nowcity" :key="index">{{ item }}</div>
    </div>
    <div class="renmen">热门城市</div>
    <div class="dizhi">
      <div><router-link to="/movie/reying">上海</router-link></div>
      <div><router-link to="/movie/reying">北京</router-link></div>
      <div><router-link to="/movie/reying">广州</router-link></div>
      <div><router-link to="/movie/reying">深圳</router-link></div>
      <div><router-link to="/movie/reying">武汉</router-link></div>
      <div><router-link to="/movie/reying">天津</router-link></div>
      <div><router-link to="/movie/reying">西安</router-link></div>
      <div><router-link to="/movie/reying">南京</router-link></div>
      <div><router-link to="/movie/reying">杭州</router-link></div>
      <div><router-link to="/movie/reying">成都</router-link></div>
      <div><router-link to="/movie/reying">重庆</router-link></div>
      <div><router-link to="/movie/reying">梅州</router-link></div>
    </div>
    <van-index-bar :index-list="indexList">
      <template v-for="(item, index) in citylist">
        <van-index-anchor class="kong" :key="index" :index="item.initial" />
        <van-cell
          v-for="(i, ind) in item.list"
          :key="index + '-' + ind"
          :title="i.name"
          @click="goHome(i.name)"
        />
      </template>
    </van-index-bar>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "CityList",
  data() {
    return {
      nowcity: [],
      citylist: [],
      indexList: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "J",
        "K",
        "L",
        "M",
        "N",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "W",
        "X",
        "Y",
        "Z",
      ],
    };
  },
  mounted() {
    this.nowcity = JSON.parse(localStorage.getItem("nearcity"));
    console.log(this.nowcity);
    axios.get("./json/city.json").then((res) => {
      console.log(res);
      this.citylist = res.data.city;
    });
  },
  methods: {
    goHome(name) {
      console.log(name);
      var data = JSON.parse(localStorage.getItem("nearcity")) || [];
      console.log(typeof data);
      if (data.indexOf(name) == -1) {
        data.push(name);
      }
      localStorage.setItem("nearcity", JSON.stringify(data));
      this.$router.push("/");
    },
  },
};
</script>

<style lang="less" scoped>
.dingwei {
  width: 100%;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  color: #333;
  background: #ebebeb;
}
.chengshi {
  width: 100%;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  color: #333;
  background: #ebebeb;
  margin-top: 10px;
}
.fangwen {
  display: flex;
  flex-direction: row;
  justify-content: start;
  flex-wrap: wrap;
  div {
    display: flex;
    justify-content: space-around;
    width: 90px;
    height: 33px;
    margin-left: 10px;
    margin-top: 5px;
    line-height: 33px;
    font-size: 14px;
    color: #996969;
    border: 1px solid #e9e9e9;
  }
}
.renmen {
  width: 100%;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  color: #333;
  background: #ebebeb;
  margin-top: 10px;
  margin-bottom: 10px;
}
.dizhi {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  width: 100%;
  height: 200px;
  div {
    width: 2.4rem;
    height: 0.88rem;
    line-height: 0.88rem;
    font-size: 14px;
    text-align: center;
    border-radius: 5px;
    border: 1px solid #e9e9e9;
    padding-left: 10px;
  }
}
.kong {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: #ebebeb;
}
</style>